<template>
  <a-page-header
    title="费用报销预览"
    @back="emit('close')"
    style="background-color: #fff; border-radius: 10px; height: 100%"
  >
    <a-spin :spinning="spinning">
      <a-descriptions style="padding: 20px 40px">
        <a-descriptions-item label="报销项目">{{
          obj.item
        }}</a-descriptions-item>
        <a-descriptions-item label="报销科目">{{
          obj.subject
        }}</a-descriptions-item>
        <a-descriptions-item label="经费来源">{{
          obj.fundsSource
        }}</a-descriptions-item>
        <a-descriptions-item label="报销金额">
          <a-tag color="orange">{{ obj.ReimbursementAmount }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="经费余额">
          <a-tag color="orange">{{ obj.balance }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="报销人">
          {{ obj.username }}
        </a-descriptions-item>
        <a-descriptions-item label="报销单位">
          {{ obj.union }}
        </a-descriptions-item>
        <a-descriptions-item label="经办人">
          {{ obj.member }}
        </a-descriptions-item>
        <a-descriptions-item label="经办人工号">
          {{ obj.workNo }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag color="purple" v-if="obj.status === 0">待分工会审核</a-tag>
          <a-tag color="blue" v-if="obj.status === 1">待财务审核</a-tag>
          <a-tag color="cyan" v-if="obj.status === 2">待工会主席审核</a-tag>
          <a-tag color="green" v-if="obj.status === 3">已审核完毕</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="申请方式">
          <a-tag color="blue">{{
            obj.isPersonage ? "个人申请" : "分工会/协会申请"
          }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="申请人电话">
          {{ obj.phone }}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{ obj.time }}
        </a-descriptions-item>
        <a-descriptions-item label="发票张数">
          {{ obj.invoiceQuantity }}
        </a-descriptions-item>
        <a-descriptions-item label="发票号码">
          {{ obj.invoiceNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="结算方式">
          {{ obj.type }}
        </a-descriptions-item>
        <a-descriptions-item label="户名">
          {{ obj.username }}
        </a-descriptions-item>
        <a-descriptions-item label="账号">
          {{ obj.accountNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="开户行">
          {{ obj.bankOfDeposit }}
        </a-descriptions-item>
        <a-descriptions-item label="通用经费">
          {{ obj.commonFunds }}
        </a-descriptions-item>
        <a-descriptions-item label="专项经费">
          {{ obj.specialFund }}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-page-header>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits<{
  (event: "close"): void;
}>();
const spinning = ref(false);
const obj = ref({
  id: "1",
  item: "扩大科研项目经费",
  workNo: "ThinkSoft",
  subject: "测试科目",
  fundsSource: "测试来源",
  isPersonage: 1,
  balance: 10000000,
  ReimbursementAmount: 888888888,
  union: "经济管理学院工会",
  member: "是呆龙没错了",
  phone: "17859520236",
  time: "2023-11-15",
  invoiceQuantity: 2,
  invoiceNumber: 11451451,
  type: "对个人转账",
  username: "呆龙",
  accountNumber: 625965087177209,
  bankOfDeposit: "测试开户行",
  source: "通用经费",
  commonFunds: "现金",
  specialFund: "测试专项经费",
  status: 2,
});
</script>

<style scoped>
:deep(.ant-descriptions-item-label) {
  font-size: 15px;
}
:deep(.ant-descriptions-item-content) {
  display: flex;
  font-size: 15px;
  align-items: center;
}
</style>
